<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getOverview } from '@/services/reportApi'

const router = useRouter()

// 概览数据（初始化为 0；挂载后从后端拉取）
const stats = ref([
  { label: '总线索数', value: 0 },
  { label: '待分配线索数', value: 0 },
  { label: '待跟进线索数', value: 0 },
  { label: '跟进中线索数', value: 0 },
  { label: '伪线索数', value: 0 },
  { label: '转商机线索', value: 0 },
])

const bizStats = ref([
  { label: '总商机数', value: 0 },
  { label: '待分配商机数', value: 0 },
  { label: '待跟进商机数', value: 0 },
  { label: '跟进中商机数', value: 0 },
  { label: '伪商机数', value: 0 },
  { label: '转客户商机', value: 0 },
])

onMounted(async () => {
  try {
    const d = await getOverview()
    // 将返回的 data 字段绑定到页面（http 封装已自动提取 data）
    stats.value = [
      { label: '总线索数', value: d?.clueTotal ?? 0 },
      { label: '待分配线索数', value: d?.clueWaitAllot ?? 0 },
      { label: '待跟进线索数', value: d?.clueWaitFollow ?? 0 },
      { label: '跟进中线索数', value: d?.clueFollowing ?? 0 },
      { label: '伪线索数', value: d?.clueFalse ?? 0 },
      { label: '转商机线索', value: d?.clueConvertBusiness ?? 0 },
    ]
    bizStats.value = [
      { label: '总商机数', value: d?.businessTotal ?? 0 },
      { label: '待分配商机数', value: d?.businessWaitAllot ?? 0 },
      { label: '待跟进商机数', value: d?.businessWaitFollow ?? 0 },
      { label: '跟进中商机数', value: d?.businessFollowing ?? 0 },
      { label: '伪商机数', value: d?.businessFalse ?? 0 },
      { label: '转客户商机', value: d?.businessConvertCustomer ?? 0 },
    ]
  } catch (e) {
    console.error('概览数据获取失败:', e?.message || e)
  }
})

function goCourses() {
  router.push('/courses')
}
function goLeads(){
  router.push('/leads/list')
}
function goOpps(){
  router.push('/opps/list')
}
function goActivities(){
  router.push('/activities')
}
function goCustomers(){
  router.push('/customers')
}
function goLogs(){
  router.push('/system/logs')
}
function goDepartments(){
  router.push('/system/departments')
}
function goRoles(){
  router.push('/system/roles')
}
</script>

<template>
  <div class="home">
    <div class="welcome">欢迎您，进入轻客管家系统</div>

    <div class="overview">
      <div class="panel">
        <div class="panel-title">线索概览</div>
        <div class="grid">
          <div v-for="(s, i) in stats" :key="i" class="box">
            <div class="label">{{ s.label }}</div>
            <div class="value">{{ s.value }}</div>
          </div>
        </div>
      </div>
      <div class="panel">
        <div class="panel-title">商机概览</div>
        <div class="grid">
          <div v-for="(s, i) in bizStats" :key="i" class="box">
            <div class="label">{{ s.label }}</div>
            <div class="value">{{ s.value }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="quick">
      <div class="shortcut" @click="goCourses">
        <div class="icon">📘</div>
        <div class="text">
          <div class="title">课程管理</div>
          <div class="sub">课程信息维护</div>
        </div>
      </div>
      <div class="shortcut" @click="goLeads">
        <div class="icon">🧲</div>
        <div class="text">
          <div class="title">线索管理</div>
          <div class="sub">线索信息维护</div>
        </div>
      </div>
      <div class="shortcut" @click="goOpps">
        <div class="icon">📈</div>
        <div class="text">
          <div class="title">商机管理</div>
          <div class="sub">商机信息维护</div>
        </div>
      </div>
      <div class="shortcut" @click="goActivities">
        <div class="icon">📅</div>
        <div class="text">
          <div class="title">活动管理</div>
          <div class="sub">活动信息维护</div>
        </div>
      </div>
      <div class="shortcut" @click="goCustomers">
        <div class="icon">👥</div>
        <div class="text">
          <div class="title">客户管理</div>
          <div class="sub">客户信息维护</div>
        </div>
      </div>
      <div class="shortcut" @click="goLogs">
        <div class="icon">📝</div>
        <div class="text">
          <div class="title">日志统计</div>
          <div class="sub">日志信息查询</div>
        </div>
      </div>
      <div class="shortcut" @click="goDepartments">
        <div class="icon">🏢</div>
        <div class="text">
          <div class="title">部门管理</div>
          <div class="sub">部门信息维护</div>
        </div>
      </div>
      <div class="shortcut" @click="goRoles">
        <div class="icon">🛡️</div>
        <div class="text">
          <div class="title">角色管理</div>
          <div class="sub">角色权限配置</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home { padding: 16px; }
.welcome { text-align: center; font-size: 26px; color: #1677ff; font-weight: 800; letter-spacing: 2px; margin: 10px 0 20px; }

.overview { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.panel-title { color: #10b981; font-weight: 700; margin-bottom: 8px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.box { background: #fff; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 10px; display: grid; place-items: center; }
.box .label { color: #6b7280; }
.box .value { color: #1677ff; font-size: 20px; font-weight: 800; }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.shortcut { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.06); cursor: pointer; }
.shortcut:hover { box-shadow: 0 8px 18px rgba(0,0,0,0.08); }
.shortcut .icon { width: 36px; height: 36px; font-size: 20px; display: grid; place-items: center; border-radius: 8px; background: #eef2ff; color: #1677ff; }
.shortcut .title { font-weight: 700; }
.shortcut .sub { color: #6b7280; font-size: 13px; }
.shortcut.disabled { cursor: default; opacity: 0.7; }
</style>